const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/index.html',
  filename: 'index.html',
  title: 'study react',
  inject: 'body',
});

const CleanWebpackPluginConfig = new CleanWebpackPlugin();

module.exports = {
  entry: path.resolve(__dirname, 'app/jsx/App.jsx'),
  output: {
    filename: '[name].[chunkhash:8].js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    compress: true,
    port: 8080,
    hot: true,
    inline: true,
    hotOnly: true,
    overlay: true,
    publicPath: '/',
    open: true,
  },
  module: {
    rules: [
      { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s(c|a)ss$/,
        use: ['style-loader', 'css-loader', 'scss-loader'],
      },
      {
        test: /\.(jpg|png|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]',
                  publicPath: '/',
                },
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [HTMLWebpackPluginConfig, CleanWebpackPluginConfig],
};
